import React, {useEffect, useState} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {Role} from './data.d';
import {modulesUrl} from "@/assets/constant/modulesUrl";
import TableList from "@/assets/components/tableList";
import {hooksSet} from "@/assets/utils/utils";
import {Form, Input} from "antd";

const RoleList: React.FC<{}> = () => {

  const [columns, setColumns] = useState<ProColumns<Role>[]>([
    {
      title: '名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
    },
    {
      title: '英文名称',
      dataIndex: 'enName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
      hideInSearch:true,
      renderFormItem: (_, __, form) => (
        <Form.Item key={"enName"} name={"enName"} label={"英文名称"} rules={[{required: true, message: '英文名称为必填项',},]}>
          <Input placeholder="请输入英文名称" disabled={form.getFieldValue("id") ? true : false}/>
        </Form.Item>
      ),
    },
  ]);

  /**
   * 启动加载
   */
  useEffect(() => {

  }, []);

  return (
    <TableList
      changeColumns={(columns: any) => hooksSet(setColumns, columns)}
      columns={columns}
      moduleUrl={modulesUrl.sysRole}
      title={"角色管理"}
      isNotUseModalForm={true}
    />
  );
};

export default RoleList;
